<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ主题气泡在线预览</title>
 <meta charset="utf-8" />
    <meta name="keywords" content="QQ主题气泡在线预览、QQ主题、免费使用、QQ美化、南枝、欲归来、QQ百变气泡" />
    <meta name="description" content="QQ主题气泡在线预览，提供QQ个性装扮预览图服务，输入装扮ID即可生成预览图并且可以一键跳转到装扮详情页面。" />
   <link rel="icon" href="image/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        @font-face {
            font-family: 'MyFont';
            src: url('font/font.ttf') format('truetype');
        }
        body {
            font-family: 'MyFont', Arial, sans-serif;
        }
        .header {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 2px;
        }
        .button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            text-align: center;
            text-decoration: none;
            border-radius: 50px;
            transition: background-color 0.3s, box-shadow 0.3s, transform 0.1s;
        }
        .button:hover {
            background-color: #45a049;
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
        }
        .button:active {
            transform: scale(0.95);
            box-shadow: 0 0 20px rgba(0, 255, 0, 1);
        }
        .link-container {
            text-align: center;
            margin-top: 20px;
        }
        .input-container {
            text-align: center;
        }
        input[type="number"] {
            padding: 10px;
            border-radius: 150px;
            width: calc(100% - 40px); /* Adjust the width as needed */
            font-size: 16px;
            box-sizing: border-box; /* Ensures padding is included in the width */
        }
           .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
            color:#0000ff;
            background-color: #00ca0d0d;
            padding: 10px 0;
        }
    </style>
</head>
<body>
  <script src="js/sweetalert.min.js"></script>
  <script>
  swal('通知','QQ个性装扮综合解析中主题教学部分类比适用于已越狱的苹果设备\n另外，本网站即将迎来大改，预览图将变成真正的预览图，敬请期待！','success');
  </script>
    <div class="header">
        <h1>QQ主题气泡预览v1.3</h1>
    </div>
    <div class="query-tool">
        <div class="mode-selector">
             <a href="#" class="button" id="theme-query-btn" style="background-color: #a500cc;">主题预览</a>
            <a href="#" class="button" id="bubble-query-btn" style="background-color: #a500cc;">气泡预览</a>
        </div>
        <div class="input-container">
            <input type="number" id="query-input" placeholder="输入装扮ID...例如：2028656">
        </div>
        <div class="result-container">
            <p id="query-result"></p>
            <div class="image-container">
                <img src="" alt="" id="image-a">
                <img src="" alt="" id="image-b">
            </div>
        </div>
    </div>
    <div class="link-container">
<div>
        <a href="https://flowus.cn/yuguilai/share/c1fa1fc0-8e2b-418d-9f2e-ff53d04c659d" class="button" style="background-color: #007bff;">QQ个性装扮综合</a>
        <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&amp;k=SjtO5JmxKLu5uYW728yko3uh0P9MAZCN&amp;authKey=Uje3kRrHBEbgELEbxLVvsybkDQ6ZhTw3OfRKc3c3JTCe1xMPL50pcr4EfersIo%2BT&amp;noverify=0&amp;group_code=817328967" class="button" style="background-color: #dc3545;">加入交流群</a>
       </div> <br>
        <a href="http://yuguilai.ysupan.com" class="button" style="background-color: #ffc107;">资源下载|调用</a>
        <a href="https://qm.qq.com/q/jxm1nyJk9c" class="button" style="background-color: #17a2b8;">添加作者</a>
    </div>
    <br>
    <br>
    <div class="link-container">
        <a href="https://github.com/yuguilai/yuguilai" class="button" style="background-color: #550088;">Github</a>
        <a href="https://t.me/qqgxzb" class="button" style="background-color: #0050C6;">Telegram</a>
    </div>
  <br>
    <div align="center"><a href="https://yuguilai.github.io/bob">球球查排名</a></div>
    <div class="footer" >Copyright by © 欲归来南枝 2024 </div>
    <script src="js/script.js"></script>
<script>
     document.body.style.backgroundImage = 'url(http://api.cmvip.cn/API/guang.php?type=image&n=' + Math.floor(Math.random() * 15 + 1) + ')';
    </script>
</body>
</html>